<template>
    <div class="stepBox">
        <div class="toIndex" @click="showALertDialog">
            <img src="~_assets/back.png" />
            返回首页
        </div>
        <div class="box firstBox" style="z-index:6" @click="changeTab(1,$event)" v-if="isShow">
            <div class="l side"></div>
            <div class="b">活动设置</div>
            <div class="r r90"></div>
        </div>
        <div class="box" style="z-index:5" @click="changeTab(2,$event)" v-if="isShow">
            <div class="l r90"></div>
            <div class="b">基础设置</div>
            <div class="r r90"></div>
        </div>
        <div class="box" style="z-index:4" @click="changeTab(3,$event)" v-if="isShow">
            <div class="l r90"></div>
            <div class="b">规则设置</div>
            <div class="r r90"></div>
        </div>
        <div class="box" style="z-index:3" @click="changeTab(4,$event)" v-if="isShow">
            <div class="l r90"></div>
            <div class="b">奖项设置</div>
            <div class="r r90"></div>
        </div>
        <div class="box lastBox" style="z-index:2" @click="changeTab(5,$event)" v-if="isShow">
            <div class="l r90"></div>
            <div class="b">完成</div>
            <div class="r side"></div>
        </div>
        <alert-dialog v-if="showDialog" @closeAlarm="closeAlarm" type="2"></alert-dialog>
    </div>
</template>
<script>
const colors = {
    'undone':'#A9D0FF',
    'doing':'#3395FF',
    'pass':'green',
    'err':'red'
}
const routers = {
    '/settingIndex/newActivities':0,
    '/settingIndex/newBasics':1,
    '/settingIndex/newRules':2,
    '/settingIndex/newRulesSale':2,
    '/settingIndex/newRuleCashback':2,
    '/settingIndex/newCashback':3,
    '/settingIndex/newStation':3,
    '/settingIndex/newGroup':3,
    '/settingIndex/newPrize':3,
    '/settingIndex/activityDone':4,
}
import Bus from '@/bus.js'
import {FIND_ACTIVITY_BY_CODE} from '@/config/url'
import AlertDialog from '../../src/views/actSettings/children/AlertDialog'

export default {
    props:['isShow'],
    components:{
        AlertDialog
    },
    data(){
        return {
            receiveType:'',
            discountType:'',
            tabStatus:['undone','undone','undone','undone','undone'],//实际各标签状态
            canStep:true,
            activityCode:sessionStorage.getItem('activityCode'),
            repeatRecord:sessionStorage.getItem('repeatRecord'),//活动复录：0 初录，1 复录
            showDialog:false,//显示弹窗
            currentPos:0,//当前步骤
        }
    },
    created(){
        Bus.$off('changeStep')
        Bus.$off('selectTab')
        Bus.$on('changeStep',(val) =>{
          this.getStatus()  
        })
        Bus.$on('selectTab',(data) =>{
            let pos = routers[data.path]
          this.selectTab($('.box')[pos])
        })
    },
    mounted(){
        this.getStatus()
    },
    methods:{
        showALertDialog(){
            if(sessionStorage.getItem('detail') == 1){
                this.closeAlarm(1)
            }else{
                this.showDialog = true
            }
        },
        closeAlarm(type){
            if(type == 1){
                if(this.repeatRecord == 1){
                    this.$router.push('/news')
                }else if(this.repeatRecord == 0){
                    this.$router.push('/actSettings')
                }
            }
            this.showDialog = false
        },
        getStatus(){
            let that = this
            this.$fetch(FIND_ACTIVITY_BY_CODE,
                {
                    "activityCode":sessionStorage.getItem('activityCode'),
                    'repeatRecord':this.repeatRecord
                },
                )
                .then(res=>{
                    if(res.status == 1){
                        if(res.data){
                            sessionStorage.setItem('discountType',res.data.discountType)
                            // sessionStorage.setItem('receiveType',res.data.receiveType)
                            sessionStorage.setItem('cashbackType',res.data.cashbackType)
                            that.tabStatus = []
                            if(res.data.settingIdentical == 0){
                                that.tabStatus.push('pass')
                            }else if(res.data.settingIdentical == 1){
                                that.tabStatus.push('err')
                            }else if(res.data.settingIdentical == null){
                                that.tabStatus[0] = 'undone'
                            }
                            if(res.data.basisIdentical == 0){
                                that.tabStatus.push('pass')
                            }else if(res.data.basisIdentical == 1){
                                that.tabStatus.push('err')
                            }else if(res.data.basisIdentical == null){
                                that.tabStatus.push('undone')
                            }
                            if(res.data.ruleIdentical == 0){
                                that.tabStatus.push('pass')
                            }else if(res.data.ruleIdentical == 1){
                                that.tabStatus.push('err')
                            }else if(res.data.ruleIdentical == null){
                                that.tabStatus.push('undone')
                            }
                            if(res.data.lotteryIdentical == 0){
                                that.tabStatus.push('pass')
                                that.tabStatus.push('pass')
                            }else if(res.data.lotteryIdentical == 1){
                                that.tabStatus.push('err')
                                that.tabStatus.push('pass')
                            }else if(res.data.lotteryIdentical == null){
                                that.tabStatus.push('undone')
                                that.tabStatus.push('undone')
                            }
                            if(res.data.receiveType == '993023'){
                                this.receiveType = '/settingIndex/newRulesSale'
                                if(res.data.discountType == '983001'){
                                    this.discountType = '/settingIndex/newStation'
                                }else{
                                    this.discountType = '/settingIndex/newGroup'
                                }
                            }else if(res.data.receiveType == '993022'){
                                this.receiveType = '/settingIndex/newRuleCashback'
                                this.discountType = '/settingIndex/newCashback'
                            }else{
                                this.receiveType = '/settingIndex/newRules'
                                this.discountType = '/settingIndex/newPrize'
                            }
                            
                            this.repeatFail(res.data)
                        }else{
                            that.tabStatus = []
                            that.tabStatus = ['undone','undone','undone','undone','undone']
                        }
                        
                        that.initTabStatus()

                        let currentPath = this.$route.path
                        let pos = routers[currentPath]
                        this.currentPos = pos
                        this.selectTab($('.box')[pos])
                    }else{
                        this.$message({
                            message: '获取状态失败',
                            type: 'warning'
                        });
                    }
                })
                .catch(err=>{
                    console.log(err)
                })
        },
        repeatFail(data){
            if(data){
                if(data.basisIdentical == 1 || data.lotteryIdentical == 1 || data.ruleIdentical == 1 && data.settingIdentical == 1){
                    sessionStorage.setItem('fail',1)//复录失败
                }else{
                    sessionStorage.setItem('fail',0)
                }
            }
        },
        toIndex(){
            this.showDialog = true
        },
        initTabStatus(){
            let tabs = $('.box')
            for(let i=0;i<tabs.length;i++){
                $(tabs[i]).css('backgroundColor',`${colors[this.tabStatus[i]]}`)
                $(tabs[i]).find('.r').css('backgroundColor',`${colors[this.tabStatus[i]]}`)
                $(tabs[i]).attr('data-status',this.tabStatus[i])
            }
            $(tabs[4]).find('.r').css('backgroundColor',`transparent`)   
        },
        selectTab(e){
            this.initTabStatus()
            $(e).css('backgroundColor','#3395FF')
            $(e).find('.r').css('backgroundColor',`#3395FF`)
            $('.box:last-child').find('.r').css('backgroundColor',`transparent`)
        },
        nextStep(pos){
            let boxItem = $('.box')[pos + 1]
            this.changeTab(pos,boxItem)
        },
        changeTab(pos,e){
            if(this.currentPos+1 != pos){
                this.initTabStatus()
                if($(e.currentTarget).attr('data-status') != 'undone'){
                    switch(pos){
                        case 1:
                            this.$router.push('/settingIndex/newActivities')
                        break;
                        case 2:
                            this.$router.push('/settingIndex/newBasics')
                        break;
                        case 3:
                            this.$router.push(this.receiveType)
                        break;
                        case 4:
                            this.$router.push(this.discountType)
                        break;
                        case 5:
                            this.$router.push('/settingIndex/activityDone')
                        break;
                    }
                }
            }
        },
    },
    watch:{
        '$route'(to, from) {
            let pos = routers[to.path]
            this.currentPos = pos
            this.selectTab($('.box')[pos])
        }
    },
    beforeDestroy(){
        Bus.$off('changeStep')
        Bus.$off('selectTab')
    }
}
</script>
<style lang="less" scoped>
    @import '~_config/mixin.less';
    .stepBox{
        margin-top:.1rem;
        .fx(row);
        .toIndex{
            position: absolute;
            cursor: pointer;
            .fx(row);
            left:0;
            width: 10%;
            img{
                .wh(24px,24px);
                margin-right: 4%;
            }
            .sc(20px,rgba(2,31,78,1))
        }
    }
    .box{
        .wh(.85rem,.24rem);
        background-color: #3395FF;
        display: flex;
        position: relative;
        align-items: center;
        margin-right: .1rem;
        cursor: pointer;
    }
    .l,.r{
        .wh(.171rem,.16rem);
        background-color: #fff;
        position: absolute;
    }
    .b{
       .fx();
       width:100%;
       .sc(.1rem,#fff);
       letter-spacing: 1.5px;
    }
    .l{
        left: -0.09rem;
    }
    .r{
        background-color: #3395FF;
        right: -0.09rem;
    }
    .r90{
        transform: rotate(45deg);
        -ms-transform:rotate(45deg); 	/* IE 9 */
        -moz-transform:rotate(45deg); 	/* Firefox */
        -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
        -o-transform:rotate(45deg); 	/* Opera */
    }
    .side{
        background-color: transparent;
    }
    .firstBox{
        border-top-left-radius: .04rem;
        border-bottom-left-radius: .04rem;
    }
    .lastBox{
        border-top-right-radius: .04rem;
        border-bottom-right-radius: .04rem;
    }
</style>
